import WebVideoCreator, { VIDEO_ENCODER, logger } from "web-video-creator";

const wvc = new WebVideoCreator();

// 配置WVC以获得最佳视频质量
wvc.config({
    // 开启调试以查看详细信息
    debug: true,
    // 开启FFmpeg调试以查看编码参数
    ffmpegDebug: true,
    // 使用PNG格式捕获帧图，无损压缩
    frameFormat: "png",
    // 设置最高帧图质量（对PNG无效，但保持一致性）
    frameQuality: 100,
    // 确保GPU加速开启
    browserUseGPU: true,
    // 使用Angle渲染后端提升质量
    browserUseAngle: true,
    // 根据您的硬件选择合适的编码器
    // 如果有NVIDIA显卡，可以使用：VIDEO_ENCODER.NVIDIA.H264
    // 如果有AMD显卡，可以使用：VIDEO_ENCODER.AMD.H264
    // 这里使用CPU编码器确保兼容性，但质量更高
    mp4Encoder: VIDEO_ENCODER.CPU.H264
});

// 创建高清单幕视频
const video = wvc.createSingleVideo({
    // 页面URL或内容
    url: "http://localhost:8080/test.html",
    // 或者直接使用页面内容
    // content: `
    // <!DOCTYPE html>
    // <html>
    //     <head>
    //         <meta charset="utf-8" />
    //         <title>高清测试页面</title>
    //         <style>
    //             body { margin: 0; padding: 50px; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); }
    //             svg { filter: drop-shadow(0 0 10px rgba(0,0,0,0.3)); }
    //         </style>
    //     </head>
    //     <body>
    //         <svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    //             <polygon points="150,50 250,250 50,250" fill="#ff4757" stroke="#ffffff" stroke-width="3">
    //                 <animateTransform attributeName="transform" attributeType="XML" type="rotate" 
    //                     from="0 150 150" to="360 150 150" dur="10s" repeatCount="indefinite" />
    //             </polygon>
    //         </svg>
    //     </body>
    // </html>
    // `,
    
    // 高分辨率设置
    width: 1920,   // 1080p宽度
    height: 1080,  // 1080p高度
    
    // 高帧率设置
    fps: 60,       // 60fps流畅度
    
    // 视频时长
    duration: 10000,
    
    // 视频输出路径
    outputPath: "./test-hd.mp4",
    
    // 视频质量设置 - 关键配置
    videoQuality: 100,        // 最高质量
    // 或者直接设置高码率（注释掉videoQuality使用这个）
    videoBitrate: "20000k",   // 20Mbps高码率
    
    // 像素格式 - 使用RGB24获得最佳颜色还原
    pixelFormat: "rgb24",     // 或者使用 "yuv444p" 获得更好的色彩
    
    // 音频质量
    audioBitrate: "320k",     // 高质量音频
    
    // 背景透明度（如果需要）
    backgroundOpacity: 1,
    
    // 显示进度
    showProgress: true,
    
    // 开启控制台日志
    consoleLog: true
});

// 监听合成完成事件
video.once("completed", result => {
    logger.success(`高清视频渲染完成！
视频时长: ${Math.floor(result.duration / 1000)}秒
渲染耗时: ${Math.floor(result.takes / 1000)}秒
实时率: ${result.rtf}
输出文件: ./test-hd.mp4`);
});

// 监听错误事件
video.once("error", err => {
    logger.error("渲染出错:", err);
});

// 启动合成
video.start();